<template>
    <div class="index">    
        <div class="banner">
            <img src="~@/assets/bg1.jpg" alt="">
            <div class="btns">
                <a-radio-group v-model="size" size="large" style="margin-bottom: 16px">
                    <a-tooltip placement="top">
                        <template slot="title">
                        <span>2020年度领军人物</span>
                        </template>
                        <a-radio-button :value="1">
                            <span class="iconfont icon-renwu"></span>人物
                        </a-radio-button>
                    </a-tooltip>
                    <a-tooltip placement="top">
                        <template slot="title">
                        <span>2020年度领军企业</span>
                        </template>
                        <a-radio-button :value="2">
                            <span class="iconfont icon-xueli"></span>企业
                        </a-radio-button>
                    </a-tooltip>    
                    <a-tooltip placement="top">
                        <template slot="title">
                        <span>2020年度卓越贡献专家</span>
                        </template>
                        <a-radio-button :value="3">
                            <span class="iconfont icon-zhuanjiajiancha-xian"></span>专家
                        </a-radio-button>
                    </a-tooltip>    
                    <a-tooltip placement="top">
                        <template slot="title">
                        <span>2020年度优秀案例</span>
                        </template>
                        <a-radio-button :value="4">
                            <span class="iconfont icon-anli"></span>案例
                        </a-radio-button>
                    </a-tooltip>
                </a-radio-group>
            </div>
        </div>
        <div class="list">
            <a-row :gutter="[0,16]" v-for="(item,key) in list" :key="key">
                <a-col :span="24">
                    <a-card hoverable>
                        <a-card-meta :title="item.name">
                            <a-avatar
                                slot="avatar"
                                :src="'http://rongnuo-bj.com/forum/2020GOLF/vote/'+item.pic"
                            />
                            <template slot="description">
                                <b>{{item.dept}}<br />{{item.postition}}</b>
                                <p class="desc">{{item.desc}}</p>
                            </template>
                        </a-card-meta>
                        <template slot="actions" class="ant-card-actions">
                            <span>票数：{{item.num}}</span>
                            <span>投票</span>
                            <span @click="showDetail(item)">详情</span>
                        </template>
                    </a-card>
                </a-col>
            </a-row>
        </div>

        <a-modal v-model="visible" :title="detail.name" centered :footer="null" ok-text="确认" cancel-text="取消">
            <a-card hoverable>
                <a-card-meta :title="detail.name">
                    <a-avatar
                        slot="avatar"
                        :src="'http://rongnuo-bj.com/forum/2020GOLF/vote/'+detail.pic"
                    />
                    <template slot="description">
                        <b>{{detail.dept}}<br />{{detail.postition}}</b>
                        <p class="desc">{{detail.desc}}</p>
                    </template>
                </a-card-meta>
                <template slot="actions" class="ant-card-actions">
                    <span>票数：{{detail.num}}</span>
                    <span>投票</span>
                </template>
            </a-card>
        </a-modal>
    </div>
</template>

<script>

export default {
    name:'Index',
    data() {
        return {
            size:1,
            visible:false,
            detail:{},
            list:[
                {
                    name:'钱湘隆',
                    pic:'images/vote/figure_8.jpg',
                    dept:'中国工商银行软件开发中心',
                    postition:'资深经理',
                    num:23651,
                    desc:'中国工商银行开发中心项目管理办公室资深经理，工行组织级 DevOps 建设及推广项目负责人。主导完成了2019年工行2个业务系统通过 DevOps 持续交付标准三级评估，取得较好的示范效应；负责从2020年起工行组织级 DevOps 建设及推广新三年规划的组织实施，涉及工行开发中心各地研发部的数千名自有及外包开发人员；同时推进 DevOps 从开发中心向业务研发中心及数据中心的延展，以提升工行整体研发效能和技术运营能力。'
                },
                {
                    name:'党受辉',
                    pic:'images/vote/figure_1.jpg',
                    dept:'腾讯科技（深圳）有限公司',
                    postition:'腾讯IEG技术运营部助理总经理、腾讯蓝鲸创始人',
                    num:2592,
                    desc:'腾讯IEG技术运营部助理总经理、腾讯蓝鲸创始人，曾就职于东软集团，为能源行业定制信息化体系。加入腾讯后负责QQ游戏平台运维团队管理，2012年开始负责腾讯游戏技术支撑体系（蓝鲸）的设计、建设和运营。结合微服务、云、大数据等理念及前沿技术，构建独立部署的技术运营PaaS，实现腾讯研发、运维、运营一体化，并通过 SaaS 化产品，助力行业内应用运维团队的转型升级，推动 devops 生态及智能化运维的落地。'
                },
                {
                    name:'黄威琪',
                    pic:'images/vote/figure_3.jpg',
                    dept:'平安银行股份有限公司',
                    postition:'科技开发中心首席架构师',
                    num:1918,
                    desc:'平安银行科技开发中心首席架构师，研发效能管理与分布式系统专家。主导建设平安银行开发运维一体化平台及相关配套基础设施，大力推动平安银行IT体系的敏捷转型和数字化建设。'
                },
                {
                    name:'李洋',
                    pic:'images/vote/figure_5.jpg',
                    dept:'雪松控股集团',
                    postition:'CIO',
                    num:1918,
                    desc:'李洋，硕士毕业于国防科大、博士毕业于中科院，从2001年就开始投身国家网信事业。他是业界知名的网络安全与信息化专家，曾先后于中国移动、中金、海尔集团、阿里、平安集团等大型世界500强集团和名企担任科技高管要职牵头信息化、数字化、安全风控等网信工作，现任雪松控股集团CIO。'
                },
                {
                    name:'许彦冰',
                    pic:'images/vote/figure_2.jpg',
                    dept:'安信证券股份有限公司',
                    postition:'信息技术总监',
                    num:1918,
                    desc:'许彦冰现担任安信证券信息技术总监兼信息技术中心总经理，全面负责公司信息技术中心的管理工作，负责公司IT治理委员会、IT治理办公室、数据治理办公室的日常运作，同时担任公司零售业务委员会委员、机构业务委员会委员等委员。担任中国证券业协会信息技术委员会委员、深圳金融科技协会副会长等职务。近三年，带领团队积极利用金融科技赋能业务发展，高质量确保公司技术平台安全稳定运行，为公司各项业务顺利开展提供有力科技支撑的同时，行业内IT影响力也大幅提高。'
                }
            ]
        }
    },
    methods:{
        showDetail(item) {
            this.detail = item;
            this.visible = true;
        }
    }
}
</script>

<style lang="scss">
    @import '../scss/index.scss';
</style>